import { useState, memo, useCallback } from "react";

const Demo5 = () => {
  // useCallback： 是一个允许你在多次渲染中缓存函数的 React Hook。  （缓存函数）
  const [count, setCount] = useState(0);
  const [value, setValue] = useState(100)
  const fn = useCallback(() => {

  }, [value])

  return (
    <div>
      <h1>Demo5</h1>
      <h2>count: {count}</h2>
      <button onClick={() => setCount(count + 1)}>+1</button>
      <h2>value: {value}</h2>
      <button onClick={() => setValue(value + 1)}>+1</button>
      <hr />
      <MemoDmemo count={count} fn={fn}></MemoDmemo>
    </div>
  );
};

const MemoDmemo = memo((props: { count: number, fn: () => void }) => {
  console.log('MemoDmemo 子组件 渲染');
  return (
    <div>
      <h4>MemoDmemo 子组件</h4>
      <h4>count: {props.count}</h4>
    </div>
  );
})

export default Demo5;
